<template>
    <view class="page-container">
        <!-- 课程信息 -->
        <view class="bg-orange mb-3 p-3 color-white rounded-lg">
                <view class="font-bold py-2 border-b-solid border-b-1 border-white mb-2">{{ course.course.name }}</view>
                <view class="line-height-loose flex justify-between">
                    <text>{{ course.class.name }}</text>
                    <text>{{ course.room.name }}</text>
                </view>
                <view class="line-height-loose flex justify-between">
                    <text>{{ course.date }} {{ course.time }}</text>
                    <text>{{course.class.total_num}}名学员</text>
                </view>
        </view>
        <!-- 学生列表 -->
         <view class="bg-light mb-3 p-3">
            <view class="flex flex-row items-center py-3 border-gray border-b-solid border-b-1">
                <!-- 学员信息 -->
                <view class=" ml-1">学员姓名</view>
                <view class="flex-1 text-center ml-4">课时</view>
                <!-- 签到按钮 -->
                <view class="mr-9">签到结果</view>
            </view>

            <view v-for="(item, index) in students" :key="index" class="flex flex-row items-center py-3 border-gray border-b-solid border-b-1">
                <!-- 头像 --> 
                <u-avatar :src="item.img ? item.img : 'http://edu.younice.top/uploads/efc270633e579fb6fecc3c540aae8c1f.jpg'" size="40" />
                <!-- 学员信息 -->
                <view class="flex-1 ml-2">{{ item.student_name }}</view>
                <input v-model="item.course_num" type="number" class="bg-white text-align-center w-8 mr-2 color-red" 
                    style="border: 1px solid gray; border-radius: 15px;" @click="() => {if(item.sign == 0) { item.course_num = '' }}" :disabled="item.sign > 0" />
                <!-- 签到按钮 -->
                <view>
                    <u-button :type="item.sign == 1 ? 'primary' : 'default'" size="mini" class="ml-1" @click="sign(index, 1)">正</u-button>
                    <u-button :type="item.sign == 2 ? 'primary' : 'default'" size="mini" class="ml-1" @click="sign(index, 2)">迟</u-button>
                    <u-button :type="item.sign == 3 ? 'primary' : 'default'" size="mini" class="ml-1" @click="sign(index, 3)">假</u-button>
                    <u-button :type="item.sign == 4 ? 'primary' : 'default'" size="mini" class="ml-1" @click="sign(index, 4)">旷</u-button>
                </view>
            </view>

            <view class="mt-3">
                <u-button style="line-height: 35px;" type="info" size="large" @click="$refs.tempSign.show(course.id)"><u-icon name="plus" />临时签到</u-button>
                <temp-sign ref="tempSign" />
            </view>
         </view>
    </view>
</template>
<script>
    import { http } from '@/utils/http';
    import tempSign from './components/temp-sign.vue'
    export default {
        name: 'courseSign',
        components: { tempSign },
        data() {
            return {
                course: {
                    class_id: 0,
                    class: { name: '', total_num: 0 },
                    room: { name: '' },
                    course: { name: '' },
                    company_id: 1,
                    course_id: 2,
                    course_name: "",
                    date: "",
                    id: 0,
                    room_id: "",
                    room_name: "",
                    student_num: 0,
                    teacher_id: 2,
                    time: ""
                },
                students: []
            }
        },
        onLoad(options) {
            http.get('/api-mini/teacher/course/info?id=' + options.id).then(res => {
                this.course = res.data.course
                const students = res.data.students
                students.forEach(item => {
                    item.sign = 0
                })
                this.students = students
                this.signList()
            })
        },
        methods: {
            sign(index, result) {
                const student = this.students[index]
                
                // 检查当前日期是否已经大于签到日期
                const now = new Date()
                const courseDate = new Date(this.course.date)
                if (now < courseDate) {
                    uni.showToast({ title: '还没有到签到日期', icon: 'none' })
                    return
                }
                // 检查是否已经签到
                if (student.sign !== 0) {
                    uni.showToast({ title: '已经签到', icon: 'none' })
                    return
                }
                // 检查课时是否大于0
                if (student.course_num <= 0) {
                    uni.showToast({ title: '课时不能小于0', icon: 'none' })
                    return
                }

             
                const data = { 
                    arrange_course_id: this.course.id,
                    course_id: this.course.course_id,
                    student_id: student.student_id,
                    course_num: student.course_num,
                    result
                }

                uni.showModal({
                    title: '提示！签到后不可修改',
                    content: '学生：' + student.student_name + '\n' +  '结果：' + (result === 1? '正常' : result === 2? '迟到' : result === 3? '请假' : '旷课') + '\n' + '课时：' + student.course_num,
                    success: (res) => {
                        if (res.confirm) {
                            http.post('/api-mini/teacher/course/sign', data).then(res => {
                                if (res.code === 200)
                                    student.sign = result
                                else
                                    uni.showToast({ title: res.msg, icon: 'none' })
                            })
                        }
                    }
                })
            },
            signList() {
                const data = { 
                    course_id: this.course.course_id,
                    class_id: this.course.class_id,
                    date: this.course.date,
                    time: this.course.time
                }
                http.post('/api-mini/teacher/course/sign-list', { arrangeId: this.course.id }).then(res => {
                    if (res.code === 200) {
                        const signList = res.data
                        this.students.forEach(item => {
                            item.course_num = this.course.course_num
                            signList.forEach(sign => {
                                if (sign.student_id === item.student_id) {
                                    item.sign = sign.result
                                    item.course_num = sign.course_num
                                }
                            })
                        })
                    }
                })
            }
        }
    }
</script>